<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>InCloud</title>
	<!-- Bootstrap -->
    <link href="css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap-responsive.css" />
    <!-- Load the Jquery UI Style to autoComplete field -->
    <link rel="stylesheet" href="css/jquery/jquery-ui-1.10.4.css" />

    <link rel="stylesheet" href="css/inCloud.css" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
	
	<jsp:include page="includes/header-index.html" />
	<!-- Agora eu crio o container principal que possuirá basicamente duas colunas 
		 a do lado esquerdo da tela conterá um formulário para busca da mídia desejada
		 a do lado direito terá todo o conteúdo da página -->
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span3">
				<!-- Form search -->
				<jsp:include page="includes/form-search.html" />
			</div>
			
			<div class="span9 inCloud-downContents">
				
				<div id="message-success"></div>
    						
				<form id="formNewUser" class="form-horizontal" method="post" action="User">
				<fieldset>
    			<legend>Create Account</legend>
    			
    			<div class="control-group">
					<label class="control-label" for="name">Name</label>
				    <div class="controls">
				      <input type="text" id="name" name="name" placeholder="Name" required="required" />
				    </div>
				</div>
				<div class="control-group">
					<label class="control-label" for="username">Username</label>
				    <div class="controls">
				      <input type="text" id="username" name="username" placeholder="Username" required="required" />
				    </div>
				</div>
				  <div class="control-group">
				    <label class="control-label" for="email">E-mail</label>
				    <div class="controls">
				      <input type="text" id="email" name="email" placeholder="example@incloud.com" required="required" />
				    </div>
				  </div>
				  <div class="control-group">
				    <label class="control-label" for="password">Password</label>
				    <div class="controls">
				      <input type="password" id="password" name="password" required="required" />
				    </div>
				  </div>
				  <div class="control-group">
				    <label class="control-label" for="confirmPassword">Confirm Password</label>
				    <div class="controls">
				      <input type="password" id="confirmPassword" name="confirmPassword" required="required" />
				    </div>
				  </div>
				  <div class="control-group">
				    <label class="control-label" for="country">Country</label>
				    <div class="controls">
						<select id="country" class="span4" name="country" required="required">
						</select>
				    </div>
				  </div>
				  <div class="control-group">
				    <label class="control-label" for="country">Account Type</label>
				    <div class="controls">
						<select id="accountType" class="span4" name="accountType" required="required">
						</select>
				    </div>
				  </div>
				  
				  <!-- Create a hidden field to send the action to be performed by server. However, 
				  this information is going to be used to know what to do. For example: register a new
				  user, or update an user or delete it -->
				  <input type="hidden" id="action" name="action" value="new" />
				  
				  <div class="control-group">
				    <div class="controls">
				      <button type="submit" class="btn btn-primary">Send</button>
				    </div>
				  </div>
				  </fieldset>
				</form>
			</div>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span3">
				<!-- Table Most accessed -->
				<jsp:include page="includes/most-accessed.html" />
			</div>
		</div>
	</div>
	
	<!-- Rodapé default das páginas -->
	<footer id="footer-page">
		<hr />
		<p>All right reserved @InCloud <small>Univas SI 5 - 2014</small></p>
	</footer>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery/jquery-1.11.0.js"></script>
    <script src="js/jquery/jquery-ui-1.10.4.js"></script>
    
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap/bootstrap.js"></script>

    <!-- InCloud Javascript to treat the login -->
    <script src="js/login.js"></script>
    <script src="js/addUser.js"></script>
    <script src="js/searchMedia.js"></script>
    <script src="js/top5Free.js"></script>
    
</body>
</html>
